<template>
  <el-container class="page-wrapper">
    <el-header class="fixed-header" height="50px">
      <app-header />
    </el-header>
    <el-container class="page-main-wrapper">
      <el-aside class="aside-menu" :width="asideWitdh">
        <app-menu />
        <div class="menu-switch" @click="changAside">
          <i :class="asideCollapse ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'" />
        </div>
      </el-aside>
      <el-main class="page-main">
        <div class="nav-tab">
          <ul>
            <vuedraggable v-model="tabs" draggable=".item">
              <transition-group>
                <li
                  class="item"
                  v-for="(tab,index) in tabs"
                  :class="activeHash == tab.hash ? 'active':''"
                  :key="tab.hash"
                  @click="changeTab(tab)"
                >
                  {{tab.title}}
                  <i
                    @click.stop="closeTab(index)"
                    class="el-icon-close nav-tab-close"
                  />
                </li>
              </transition-group>
            </vuedraggable>
          </ul>
        </div>
        <transition name="fade-transform" mode="out-in">
          <keep-alive :include="keepAliveCompontens">
            <router-view ref="main" class="main-content" />
          </keep-alive>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import AppMenu from './menu'
import AppHeader from './header'
import vuedraggable from 'vuedraggable'
const md5 = require('md5')

export default {
  components: { AppMenu, AppHeader, vuedraggable },
  name: 'layout',
  data () {
    return {
      tabs: [],
      activeHash: '',
      keepAliveMap: {}
    }
  },
  methods: {
    changAside () {
      this.$store.commit('menu/triggerCollapse')
    },
    changeTab (tab) {
      if (tab.hash === this.activeHash) {
        return
      }
      this.$router.push({
        path: tab.path, query: tab.query, fullPath: tab.fullPath, params: tab.params
      })
      this.activeHash = tab.hash
    },
    closeTab (index) {
      const { hash } = this.tabs[index]
      if (this.keepAliveMap[hash]) {
        this.keepAliveMap[hash].$destroy()
        this.keepAliveMap[hash] = null
      }
      if (this.tabs.length === 1) {
        // 只剩下最后一个
        this.tabs = []
        this.$router.push({ path: '/' })
        return
      }
      // 判断删除的是否是当前激活的
      if (this.tabs[index]['hash'] === this.activeHash) {
        // 关闭的为当前激活的页面，将路由换位前一个页面或者后一个页面
        let tab
        if (index === 0) {
          // 删除第一个
          tab = this.tabs[1]
        } else {
          tab = this.tabs[index - 1]
        }
        this.changeTab(tab)
      }
      this.tabs.splice(index, 1)
    },
    addTab (route) {
      const { path, query, fullPath, meta, params } = route
      let item = {
        path, query, fullPath, meta, params
      }
      const hash = md5(JSON.stringify(item))
      this.activeHash = hash
      for (let tab of this.tabs) {
        if (tab.hash === hash) {
          return
        }
      }
      item['hash'] = hash
      item['title'] = meta.title || route.name
      this.tabs.push(item)
      this.$nextTick(() => {
        setTimeout(() => {
          if (this.$refs['main']) {
            let name = this.$refs['main'].$options.name
            if (this.keepAliveCompontens.includes(name)) {
              this.keepAliveMap[hash] = this.$refs['main']
            }
          }
        }, 500)
      })
    }
  },
  computed: {
    asideCollapse () {
      return this.$store.state.menu.collapse
    },
    keepAliveCompontens () {
      return this.$store.state.menu.keepAliveCompontens
    },
    asideWitdh () {
      if (this.asideCollapse) {
        return '65px'
      } else {
        return '250px'
      }
    }
  },
  created () {
    this.addTab(this.$route)
  },
  watch: {
    '$route' (route) {
      this.addTab(route)
    }
  }
}
</script>
<style lang='less'>
.page-wrapper {
  height: 100%;
  padding: 0;
  .fixed-header {
    height: 80px;
    margin: 0;
    padding: 0;
    border-bottom: 0.01rem solid #e6e6e6;
    background: #fff;
    -webkit-box-shadow: 0 0.01rem 0.03rem 0 rgba(0, 0, 0, 0.12),
      0 0 0.03rem 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 0.01rem 0.03rem 0 rgba(0, 0, 0, 0.12),
      0 0 0.03rem 0 rgba(0, 0, 0, 0.04);
    display: flex;
    position: fixed;
    width: 100%;
  }
  .page-main-wrapper {
    margin-top: 50px;
    overflow: hidden;
  }
  .aside-menu {
    // background-color: rgb(48, 65, 86);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: width 0.5s;
    color: #e6e6e6;
    border-right: solid 1px #e6e6e6;
    .menu-switch {
      display: flex;
      bottom: 0px;
      height: 20px;
      text-align: center;
      background-color: #555;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      width: 100%;
      overflow-x: hidden;
      &:focus {
        background-color: #abbac3;
        border-color: #abbac3;
      }
    }
  }
  .page-main {
    padding: 10px 20px;
    overflow-y: auto;
    position: relative;
    .nav-tab {
      z-index: 99;
      height: 34px;
      width: 100%;
      background: #fff;
      border-bottom: 1px solid #d8dce5;
      -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12),
        0 0 3px 0 rgba(0, 0, 0, 0.04);
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
      display: flex;
      position: fixed;
      margin-top: -10px;
      margin-left: -20px;
      ul {
        white-space: nowrap;
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex: 1;
        overflow-x: auto;
        &::-webkit-scrollbar {
          height: 1px;
          background-color: #b5b1b1;
        }
        li {
          display: inline-block;
          position: relative;
          cursor: pointer;
          height: 26px;
          line-height: 26px;
          border: 1px solid #d8dce5;
          color: #495060;
          background: #fff;
          padding: 0 8px;
          font-size: 12px;
          margin-left: 5px;
          margin-top: 4px;
          &.active {
            background-color: #42b983;
            color: #fff;
            border-color: #42b983;
          }
        }
      }
      .nav-tab-close {
        border-radius: 50%;
        &:hover {
          background-color: #b4bccc;
          color: #fff;
        }
      }
    }
    .main-content {
      // margin: 0 20px;
      // padding: 10px 0;
      margin-top: 34px;
      flex: 1;
      overflow: auto;
      height: 100%;
    }
  }
}
</style>
